<template>
  <div class="price-board">
    <div class="type">
      {{ type }}
    </div>
    <div class="info">免费行李额{{ allowance }}kg</div>
    <div class="price">
      {{ discount }}折
      <span> ¥{{ price }} </span>
    </div>
    <div class="left">
      <button @click="buy()">
        <div id="buy">订购</div>
        <br />
        <div id="left">还剩{{ num }}张</div>
      </button>
    </div>
  </div>
</template>

<script lang="ts">
import { ElMessage } from 'element-plus';
import { defineComponent, ref, reactive, toRef } from 'vue';
import router from '@/router';

export default defineComponent({
  name: 'PriceBoard',
  props: {
    type: String,
    allowance: Number,
    discount: Number,
    price: Number,
    num: Number,
  },
  setup(props, context) {
    const buy = () => {
      if ((props.num as Number) > 0) {
        context.emit('buy', { type: props.type, price: props.price });
        router.push('/buyTicket');
      } else {
        ElMessage('余票为空！');
      }
    };
    return {
      buy,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';
$height: 155px;
$width: 1000px;
.price-board {
  box-sizing: border-box;
  margin: -1px auto;
  padding-left: 25px;
  width: $width;
  min-height: $height;
  // border-end-start-radius: 15px;
  // border-end-end-radius: 15px;
  background: #ffffff;
  box-shadow: 1px 1px 1px #3c5d89, -1px -1px 1px #517db9;
  div {
    float: left;
    margin-right: 70px;
    &.type {
      font-size: 20px;
    }
    &.info {
      height: 35px;
      line-height: 35px;
      width: 150px;
      margin-top: 61px;
      margin-right: 200px;
      border: 1px solid #56667a;
      border-radius: 15px;
      color: rgb(97, 103, 114);
    }
    &.price {
      margin-left: 110px;
      color: lighten($themeRed, 5%);
      span {
        margin-left: 95px;
        font-size: 20px;
      }
      margin-right: 35px;
    }
    &.left {
      margin: 0 auto;
      margin-top: -28px;
      button {
        box-sizing: border-box;
        width: 100px;
        padding: 0;
        color: white;
        background-color: rgb(231, 112, 0);
        border: 1px solid #eee;
        div {
          cursor: pointer;
          box-sizing: border-box;
          width: 100px;
          margin: 0;
          &#buy {
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid white;
          }
          &#left {
            height: 24px;
            line-height: 24px;
            padding: px;
          }
        }
      }
    }
  }
}
</style>
